<template>
	<view class="data-controls-wrap">
		<!-- 标题控件 -->
		<view class="title-btn-wrap" :style="{ ...titleStyle }">
			<view class="title">
				<text v-show="showTitle">{{ title }}</text>
			</view>
			<view class="btns-wrap">
				<view
					v-show="showBtns"
					class="btn"
					:class="{ active: curBtnActive === item.name }"
					v-for="(item, index) of btnList"
					:key="index"
					:text="item.name"
					@click="handleBtnClick(item)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
		<!-- 内容插槽 -->
		<view class="content-wrap">
			<slot />
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { positionBtnList } from '../../pages/data/helper/config';

const props = defineProps({
	title: {
		type: String,
		default: '标题'
	},
	activeBtnItemObj: {
		type: Object,
		default: () => ({})
	},
	btnList: {
		type: Array,
		default: () => positionBtnList
	},
	showTitle: {
		type: Boolean,
		default: true
	},
	showBtns: {
		type: Boolean,
		default: true
	},
	titleStyle: {
		type: Object,
		default: () => ({})
	}
});
const emits = defineEmits(['handleClick']);

// 按钮逻辑
const curBtnActive = ref(
	props.activeBtnItemObj.name ? props.activeBtnItemObj.name : props.btnList[0]?.name
);
const btnCustomStyle = reactive({});
 
const handleBtnClick = (btnListItem) => {
	if (curBtnActive.value === btnListItem.name) return;
	curBtnActive.value = btnListItem.name;
	emits('handleClick', btnListItem);
};
</script>

<style lang="scss" scoped>
.data-controls-wrap {
	width: 100%;
	height: 100%;

	.title-btn-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx 0 34rpx;
		width: 100%;
		height: 80rpx;

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #00d5ff;
		}

		.btns-wrap {
			display: flex;
			align-items: center;
			height: 100%;

			.btn {
				margin-left: 20rpx;
				width: 74rpx;
				height: 38rpx;
				text-align: center;
				line-height: 38rpx;
				background: rgba(73, 175, 253, 0.25);
				border: 2rpx solid #3fb2ff;
				font-size: 20rpx;
				color: #1f3d83;
			}

			::v-deep(.custom-style) {
				&.active {
					color: #fff;
					background: linear-gradient(180deg, #00ffdc 0%, #1c3c6c 100%);
				}
			}
		}
	}

	.content-wrap {
		width: 100%;
		height: calc(100% - 80rpx);
	}
}
</style>
